import {
  incrementCustomProperty,
  setCustomProperty,
  getCustomProperty,
} from "./updateCustomProperty.js";

const dinoElem = document.querySelector("[data-dino]");
const JUMP_SPEED = 0.45;
const GRAVITY = 0.0015;
const DINO_FRAME_COUNT = 2;
const FRAME_TIME = 100;

let isJumping;
let dinoFrame;
let currentFrameTime;
let yVelocity;

export function setupDino() {
  isJumping = false;
  dinoFrame = 0;
  currentFrameTime = 0;
  yVelocity = 0;

  setCustomProperty(dinoElem, "--bottom", 0); // 小恐龙初始位置
  document.removeEventListener("keydown", onJump);
  document.addEventListener("keydown", onJump);
}

/**
 * 修改小恐龙的动画
 * @param {number} delta 每帧动画的时间差
 * @param {number} speedScale 难度系数
 */
export function updateDino(delta, speedScale) {
  handleRun(delta, speedScale);
  handleJump(delta);
}

/**
 * 小恐龙运动动画
 * @param {number} delta 每帧动画的时间差
 * @param {number} speedScale 难度系数
 * @returns
 */
function handleRun(delta, speedScale) {
  // 判断小恐龙是否跳起，跳起的话关键帧只能固定一个
  if (isJumping) {
    dinoElem.src = `./imgs/dino-stationary.png`;
    return;
  }

  /**
   * 因为一帧动画可以执行很多次，所以我们需要对每帧执行完成后交替更换小恐龙的关键帧图片
   * FRAME_TIME用于每帧小恐龙交替拆分的关键值
   */
  if (currentFrameTime >= FRAME_TIME) {
    dinoFrame = (dinoFrame + 1) % DINO_FRAME_COUNT;
    dinoElem.src = `./imgs/dino-run-${dinoFrame}.png`;
    currentFrameTime -= FRAME_TIME;
  }

  currentFrameTime += delta * speedScale;
}

// 获取小恐龙
export function getDinoRect() {
  return dinoElem.getBoundingClientRect();
}

/**
 * 跳起动画
 * @param {number} delta 每帧动画的时间差，
 * @returns 小恐龙跳起跳起的高度
 */
function handleJump(delta) {
  if (!isJumping) return;

  incrementCustomProperty(dinoElem, "--bottom", yVelocity * delta);

  // 接触到地面后重置相关参数
  if (getCustomProperty(dinoElem, "--bottom") <= 0) {
    setCustomProperty(dinoElem, "--bottom", 0);
    isJumping = false;
  }

  yVelocity -= GRAVITY * delta; // 跳起是抛物线所以需要有一个重力参数
}

// 监听小恐龙跳起事件
function onJump(e) {
  if (e.code !== "Space" || isJumping) return;

  yVelocity = JUMP_SPEED;
  isJumping = true;
}

// 设置游戏结束后小恐龙的图片
export function setDinoLose() {
  dinoElem.src = "./imgs/dino-lose.png";
}
